<template>
  <div class="home-container">
    <h1 class="title">巡察系统举报平台</h1>
    <div class="departments">
      <div class="department-card" v-for="department in departments" :key="department.id">
        <h2>{{ department.name }}</h2>
        <div class="qrcode">
          <img :src="department.qrcodeUrl" alt="二维码">
        </div>
        <p class="description">{{ department.description }}</p>
        <el-button type="primary" @click="goToDepartment(department.id)">进入举报</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import QRCode from 'qrcode'

const router = useRouter()

// 部门数据
const departments = ref([
  {
    id: 'medical',
    name: '第一巡察组',
    url: 'http://47.120.49.56:5174/medical',
    description: '第一巡察组信访举报通道',
    qrcodeUrl: ''
  },
  {
    id: 'petition',
    name: '第二巡察组',
    url: 'http://47.120.49.56:5174/petition',
    description: '第二巡察组信访举报通道',
    qrcodeUrl: ''
  },
  {
    id: 'education',
    name: '第三巡察组',
    url: 'http://47.120.49.56:5174/education',
    description: '第三巡察组信访举报通道',
    qrcodeUrl: ''
  }
])

// 生成二维码
const generateQRCodes = async () => {
  for (const department of departments.value) {
    department.qrcodeUrl = await QRCode.toDataURL(department.url, {
      width: 150,
      margin: 1
    })
  }
}

// 跳转到指定部门的举报页面
const goToDepartment = (departmentId) => {
  router.push(`/${departmentId}`)
}

onMounted(() => {
  generateQRCodes()
})
</script>

<style scoped>
.home-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

.title {
  margin-bottom: 40px;
  color: #333;
}

.departments {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 5px;
}

.department-card {
  width: 20%;
  min-width: 300px;
  margin: 15px auto;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  text-align: center;
}

.department-card h2 {
  color: #d32f2f;
  margin-bottom: 20px;
}

.qrcode {
  width: 150px;
  height: 150px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qrcode img {
  max-width: 100%;
  max-height: 100%;
}

.description {
  margin-bottom: 20px;
  color: #666;
}
</style>